<template>
  <view class="package-list">
    <view 
      class="package-item" 
      v-for="(item, index) in packageList" 
      :key="index"
	  @click="goDetail(item)"
    >
      <!-- 套餐图片 -->
      <image class="package-image" v-if="item.packageCoverImage" :src="item.packageCoverImage" mode="aspectFill"></image>
      <image class="package-image" v-else src="/static/icon_haibao.png" mode="aspectFill"></image>
      <!-- 套餐信息 -->
      <view class="package-info">
        <!-- 套餐名称（两行省略） -->
        <view class="package-name">{{item.name}}</view>
        
        <!-- 创建时间 -->
        <view class="create-time">{{item.createTime}}</view>
        
        <!-- 价格信息 -->
        <view class="price-section">
          <text class="original-price">¥{{item.originalPrice}}</text>
          <text class="current-price">¥{{item.currentPrice}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      packageList: [],
	  userInfo:'',
	  refreshing:false,
	  page:1,
    }
	
  },
  onLoad() {
	   this.userInfo= uni.getStorageSync("userInfo")
     this.getList()
  },
  methods: {
     getList(){
		 uni.showLoading({
		 	title: '加载中'
		 })
		 if(this.page==1){
		 	this.packageList=[]
		 }
		 this.refreshing=true
		 this.$http('jeecg-boot/app/market/bicProduct/qyeryPage',{
		 	pageNo:this.page,
		 	pageSize:10, 
			storeId:this.userInfo.storeId,
		 },'POST').then(res => {
		 	 uni.hideLoading();
		    this.refreshing=false
		  	this.packageList=[...this.packageList, ...res.result.records]
		 })
	 },
	 goDetail(item){
		 uni.navigateTo({
		 	url:'tcDetail?id='+item.id
		 })
	 }
  },
  onPullDownRefresh() {
  	//下拉刷新
  	 this.page==1
  	 this.getList()
  	
  	setTimeout(function() {
  		uni.stopPullDownRefresh();
  	}, 1000);
  },
  onReachBottom() {
  	this.page++;
     this.getList()
  },
}
</script>

<style>
.package-list {
  padding: 24rpx;
  min-height: 100vh;
  background-color: #f7f7f7;
}

.package-item {
  display: flex;
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 8px;
}

.package-image {
  width: 100px;
  height: 80px;
  border-radius: 4px;
  margin-right: 12px;
}

.package-info {
  flex: 1;
}

.package-name {
  font-size: 15px;
  color: #333;
  font-weight: bold;
  /* 两行省略效果 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: 2.8em;
}

.create-time {
  font-size: 12px;
  color: #999;
  margin: 5px 0;
}

.price-section {
  display: flex;
  align-items: center;
}

.original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
  margin-right: 8px;
}

.current-price {
  font-size: 16px;
  color: #FF5A5F;
  font-weight: bold;
}
</style>